<template>
  <div class="zoom">
    <el-header>
      <el-row class="el-row1">
        <el-col :span="8">
          <el-image :src="require('@/assets/images/新UI200.png')"></el-image>
        </el-col>
        <el-col :span="8">
          <el-image :src="require('@/assets/images/新UI1.png')"></el-image>
        </el-col>
        <el-col :span="3">
          <el-image :src="require('@/assets/images/新UI4.png')"></el-image>
        </el-col>
        <el-col :span="5">
          <div @click="logout()" class="headerimage"></div>
        </el-col>
      </el-row>
      <el-row class="navcss">
        <span id="time"></span>

        <el-menu
          :default-active="activeIndex+' '"
          class="el-menu-demo"
          mode="horizontal"
          style="margin-left:30%;width:737px;"
          background-color="#002B26"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1" @click="routertoinfo()" class="shouye">
            <!-- 首页 -->
            <font class="fontnav">首页&nbsp&nbsp&nbsp</font>
          </el-menu-item>
          <el-submenu index="2">
            <!-- 系统总览 -->
            <template slot="title">
              <font class="fontnav">系统总览</font>
            </template>
            <el-menu-item index="2-1" @click="routertosystemstructure()">
              <font color="white">系统结构</font>
            </el-menu-item>
            <el-menu-item index="2-2" @click="routertoCharactInfo()">
              <font color="white">功率曲线</font>
            </el-menu-item>
            <el-menu-item index="2-3" @click="routertoOperaInfo()">
              <font color="white">运行参数</font>
            </el-menu-item>
            <el-menu-item index="2-5" @click="routertocoulometry()">
              <font color="white">电量分析</font>
            </el-menu-item>
            <!-- <el-menu-item index="2-5" @click="routertopoweranalysis()"
                      ><font color="white">电量分析</font></el-menu-item
            >-->
            <!-- <el-menu-item index="2-6" @click="routertonetcharactinfo()">
              <font color="white">环境检测</font>
            </el-menu-item>-->

            <el-menu-item index="2-8" @click="routertoalarm()">
              <font color="white">告警管理</font>
            </el-menu-item>
            <el-menu-item index="2-8" @click="routertoEquipmentbasicdata()" v-if="status">
              <font color="white">拓扑编辑</font>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <font class="fontnav">运行监控</font>
            </template>

            <el-menu-item index="3-1-0" @click="routertoruncontroller()">
              <font color="white">运行控制</font>
            </el-menu-item>
            <el-menu-item index="3-1-1" @click=" routertopcc()">
              <font color="white">微网PCC</font>
            </el-menu-item>
            <el-submenu index="3-1-2">
              <template slot="title">
                <font color="white">分布式能源</font>
              </template>
              <el-menu-item index="2-4-1" @click="routertowindpowersystem()">
                <font color="white">风电系统</font>
              </el-menu-item>
              <el-menu-item index="2-4-2" @click="routertopvsystem()">
                <font color="white">光伏系统</font>
              </el-menu-item>
              <el-menu-item index="2-4-3" @click=" routertodieselsystem()">
                <font color="white">三联供</font>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3-1-3">
              <template slot="title">
                <font color="white">储能系统</font>
              </template>
              <el-menu-item index="3-1-3-1" @click=" routertopowerstoragesystem()">
                <font color="white">蓄电池储能</font>
              </el-menu-item>
              <el-menu-item index="3-1-3-1" @click=" routertocapstoragesystem()">
                <font color="white">功率型储能</font>
              </el-menu-item>
            </el-submenu>

            <el-menu-item index="3-1-4" @click="routertoloadsystem()">
              <font color="white">负荷系统</font>
            </el-menu-item>
          </el-submenu>
          <!-- </el-submenu> -->
          <el-submenu index="4">
            <template slot="title">
              <font class="fontnav">能量管理</font>
            </template>
            <el-menu-item index="4-1" @click="routertopowerforecasting()">
              <font color="white">发电预测</font>
            </el-menu-item>
            <el-menu-item index="4-2" @click="routertoloadforecasting()">
              <font color="white">负荷预测</font>
            </el-menu-item>
            <!-- <el-menu-item index="4-3" @click="routertooptimaloperation()"
            ><font color="white">优化调度</font></el-menu-item>-->
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <font class="fontnav">综合分析</font>
            </template>
            <!-- <el-menu-item index="5-1" @click="routertocoulometry()"
                      ><font color="white">电量分析</font></el-menu-item
            >-->

            <el-menu-item index="5-5" @click=" routertoenergyconsumptionanalysis()">
              <font color="white">综合能量分析</font>
            </el-menu-item>
            <el-menu-item index="5-6" @click="routertoenrgyefficiencyanalysis()">
              <font color="white">综合能效分析</font>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <font class="fontnav">系统管理</font>
            </template>
            <el-menu-item index="6-1" @click="routertodatacollection()">
              <font color="white">导出管理</font>
            </el-menu-item>
            <el-menu-item index="6-2" @click="routertousermanage()" v-if="status">
              <font color="white">用户管理</font>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <!-- </el-submenu> -->
        <button class="time">{{ date | formaDate }}</button>
        <button class="username">当前用户：{{username}}</button>
      </el-row>
      <!-- <el-divider></el-divider> -->
    </el-header>
  </div>
</template>
                
<script>
import Cookies from 'js-cookie'
//创建一个函数来增加月日时小于10在前面加0
var padaDate = function(value) {
  return value < 10 ? '0' + value : value
}
export default {
  data() {
    return {
      date: new Date(), //实时时间
      activeIndex: '1',
      status: false,
      activeName: 'first',
      username: ''
    }
  },

  props: {
    props: {
      type: Object,
      require: true
    }
  },
  mounted() {
    this.username = Cookies.get('username')
    // setInterval(this.weather(),2000,"JavaScript")
    //创建定时器更新最新的时间
    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date() // 修改数据date
    }, 1000)

    if (Cookies.get('token') == 1) {
      this.status = true
    } else {
      this.status = false
    }
    console.log('状态量为：' + this.status)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  filters: {
    //设置一个函数来进行过滤
    formaDate: function(value) {
      //创建一个时间日期对象
      var date = new Date()
      var year = date.getFullYear() //存储年
      var month = padaDate(date.getMonth() + 1) //存储月份
      var day = padaDate(date.getDate()) //存储日期
      var hours = padaDate(date.getHours()) //存储时
      var minutes = padaDate(date.getMinutes()) //存储分
      var seconds = padaDate(date.getSeconds()) //存储秒
      //返回格式化后的日期
      return (
        year +
        '年' +
        month +
        '月' +
        day +
        '日' +
        hours +
        '时' +
        minutes +
        '分' +
        seconds +
        '秒'
      )
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    // logout() {
    //   // 子组件中触发父组件方法ee并传值cc12345
    //   this.$emit('ee', 'true')
    // },
    logout() {
      console.log('退出登陆')
      window.sessionStorage.clear()
      //  Cookies.remove('token')
      this.$router.push('/login/login')
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },
    routertoruncontroller() {
      this.$router.push({ path: '/operationmonitoring/runcontroller' })
    },
    routertoinfo() {
      this.$router.push({ path: '/home' })
    },
    routertodatepick() {
      this.$router.push({ path: '/datepicker' })
    },
    routertoindex2() {
      this.$router.push({ path: '/indexx' })
    },
    routertoEquipmentbasicdata() {
      this.$router.push({ path: '/systemoverview/workspace' })
    },
    routertoCharactInfo() {
      this.$router.push({ path: '/systemoverview/powercurve' })
    },
    //  运维信息
    routertoOperaInfo() {
      this.$router.push({ path: '/systemoverview/operationparameters' })
    },
    routertoexample() {
      this.$router.push({ path: '/systemoverview/example' })
    },
    //  networkdata
    routertosystemstructure() {
      this.$router.push({ path: '/systemoverview/systemstructure' })
    },
    //  weather
    routertoweather() {
      this.$router.push({ path: '/workspacecopy' })
    },
    //  netcharactinfo
    routertonetcharactinfo() {
      this.$router.push({ path: '/systemoverview/environmentalmonitoring' })
    },
    //netoperainfo
    routertonetoperainfo() {
      this.$router.push({ path: '/systemoverview/systemoperatingmode' })
    },
    routertoalarm() {
      this.$router.push({ path: '/systemoverview/alarmmanagement' })
    },
    routertoequipmentReport() {
      this.$router.push({ path: '/equipmentreport' })
    },
    routertonetworkReport() {
      this.$router.push({ path: '/networkreport' })
    },
    routertousermanage() {
      this.$router.push({ path: '/systemmanagement/usermanagement' })
    },
    routertoauthority() {
      this.$router.push({ path: '/authority' })
    },
    routertodatainterface() {
      this.$router.push({ path: '/datainterface' })
    },
    routertodataprepro() {
      this.$router.push({ path: '/dataprepro' })
    },
    routertodecision() {
      this.$router.push({ path: '/decision' })
    },
    routertodiscuss() {
      this.$router.push({ path: '/discuss' })
    },
    routertomodelmanager() {
      this.$router.push({ path: '/modelmanager' })
    },
    routertosampling() {
      this.$router.push({ path: '/sampling' })
    },
    routertopcc() {
      this.$router.push({ path: '/operationmonitoring/pcc' })
    },

    routertowindpowersystem() {
      this.$router.push({ path: '/operationmonitoring/windpowersystem' })
    },
    routertopvsystem() {
      this.$router.push({ path: '/operationmonitoring/pvsystem' })
    },
    routertodieselsystem() {
      this.$router.push({ path: '/operationmonitoring/dieselsystem' })
    },
    routertopowerstoragesystem() {
      this.$router.push({ path: '/operationmonitoring/powerstoragesystem' })
    },
    routertocapstoragesystem() {
      this.$router.push({ path: '/operationmonitoring/capstoragesystem' })
    },
    routertoloadsystem() {
      this.$router.push({ path: '/operationmonitoring/loadsystem' })
    },

    routertomonitoring() {
      this.$router.push({ path: '/operationmonitoring/monitoring' })
    },
    routertopowerforecasting() {
      this.$router.push({ path: '/energymanagement/powerforecasting' })
    },
    routertoenergymanagement() {
      this.$router.push({ path: '/energymanagement/energymanagement' })
    },
    routertoloadforecasting() {
      this.$router.push({ path: '/energymanagement/loadforecasting' })
    },
    routertodatacollection() {
      this.$router.push({ path: '/systemmanagement/datacollection' })
    },
    routertofuelmanagement() {
      this.$router.push({ path: '/energymanagement/fuelmanagement' })
    },
    routertooptimaloperation() {
      this.$router.push({ path: '/energymanagement/optimaloperation' })
    },
    routertostateofrepair() {
      this.$router.push({ path: '/energymanagement/stateofrepair' })
    },
    routertonuclearpowerstate() {
      this.$router.push({ path: '/energymanagement/nuclearpowerstate' })
    },
    routertopowermanagement() {
      this.$router.push({ path: '/energymanagement/powermanagement' })
    },
    routertoloadmanagement() {
      this.$router.push({ path: '/energymanagement/loadmanagement' })
    },
    routertoloadclassmanagement() {
      this.$router.push({ path: '/energymanagement/loadclassmanagement' })
    },
    routertopowergenerationplan() {
      this.$router.push({ path: '/energymanagement/powergenerationplan' })
    },
    routertopoweranalysis() {
      this.$router.push({ path: '/systemoverview/poweranalysis' })
    },
    routertoreport() {
      this.$router.push({ path: '/systemmanagement/report' })
    },
    routertocoulometry() {
      this.$router.push({ path: '/comprehensiveanalysis/coulometry' })
    },
    routertoenergyconsumptionanalysis() {
      this.$router.push({
        path: '/comprehensiveanalysis/energyconsumptionanalysis'
      })
    },
    routertoenergypriceinfo() {
      this.$router.push({ path: '/comprehensiveanalysis/energypriceinfo' })
    },
    routertoenrgyefficiencyanalysis() {
      this.$router.push({
        path: '/comprehensiveanalysis/enrgyefficiencyanalysis'
      })
    },
    routertoloadanalysis() {
      this.$router.push({ path: '/comprehensiveanalysis/loadanalysis' })
    },
    routertotradeinfo() {
      this.$router.push({ path: '/comprehensiveanalysis/tradeinfo' })
    }
  }
}
</script>
<style lang="scss">
// 如果同一个页面中出现有的需要使用scoped,有的不需要可以使用两个style分别设置
.el-menu--horizontal > .el-submenu > .el-submenu__title {
  height: 5rem;

  background-image: url(../assets/images/新UI7.png);
  background-size: 100% 100%;
}
.el-header {
  // background-color: #030a0d;
  // background-color: #005b5c;
  //  background-image: url(../assets/images/新UI10.png);
  //   background-repeat:no-repeat;
  //    background-size:100% 100%;
  // display:  flex;
  // background-image: url(../assets/images/新UI20.png);
  // background-repeat:no-repeat;
  // background-size:100% 100%;
  align-items: center;
  // height: 9%;
  // height: 800px;
  margin-bottom: 5%;
  padding-left: 0px;
  padding-right: 0px;
}
</style>
<style lang="scss" scoped>
.time {
  width: 18rem;
  height: 4.7rem;
  color: #a1fed5;
  border: 0px;
  background-image: url(../assets/images/新UI7.png);
  background-size: 100% 100%;
  position: absolute;
  left: 75%;
  top: 2px;
  z-index: 1;
}
.username {
  width: 17rem;
  height: 4.7rem;
  color: #a1fed5;
  border: 0px;
  background-image: url(../assets/images/新UI7.png);
  background-size: 100% 100%;
  position: absolute;
  left: 88%;
  top: 2px;
  z-index: 1;
}
.navcss {
  background-image: url(../assets/images/新UI7.png);
  background-repeat: repeat;
  background-size: 100% 97%;
}
.zoom {
}

.fontnav {
  font-size: 18px;
  font-weight: bold;
  color: #a1fedb;
}
.navimage {
  // background-image: url(../assets/images/新UI3.png);
}
.shouye {
  width: 6.4rem;
  height: 5rem;
  background-image: url(../assets/images/新UI7.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.el-menu.el-menu--horizontal {
  // border-bottom: solid 0px #e6e6e6;
  border-bottom: solid 0px #256768;
}

.el-row1 {
  background-image: url(../assets/images/新UI2011.png);
  background-size: 100% 100%;
  // background-color:#030A0D;
}
.headerimage {
  width: 100%;
  height: 6.25rem;
  background-image: url(../assets/images/新UI9.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
